<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest Problem - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<style>
    .headerNav{min-width:1024px;width:96%!important;}
    .headerNav ul.hright{margin-right:0px;!important;}
    .container {width:100%!important;}
    body, html {margin:0!important; height:100%!important; overflow-x:hidden!important;overflow-y:hidden!important}
</style>
<body>
<div th:replace="common::web-navbar"></div>
<div id="problem-box">
        <div id="problem-box-left" >
            <div id="problem-box-nav" class="problem-second-nav">
                <ul class="hleft">
                    <li class="nav_menu"><a class="" th:href="@{/contest/{contestId}(contestId=${contestProblem.contest_id})}">[[#{contestproblems}]]</a></li>
                    <li id="problem-box-nav-content" class="nav_menu current">
                        <span>[[#{problem.description}]]</span>
                    </li>
                    <li id="problem-box-nav-status" class="nav_menu" th:if="${session.session_username != null}">
                        <span class="problem-box-nav-status" >[[#{problem.mysubmit}]]</span>
                    </li>
                    <li class="nav_menu"><a th:href="@{/contest/{contestId}/standings(contestId=${contestProblem.contest_id})}" target="blank">[[#{problem.contest_standings}]]</a></li>
                </ul>
                <ul class="hright">
                    <li class="nav_menu"> </li>
                </ul>
            </div>
            <div id="problem-content" class="problem-content small-scrollbar">
                <div id="problem-status" class="problem-status">
                    <div class="roundbox" style="">
                        <div class="roundbox-title ">
                            <div class="left"><span th:text="${contestProblem.num}+'.'+${contestProblem.title}"></span></div>
                            <div class="right">
                                <span><a style="margin-right: 6px;font-size:10px;color:grey;text-decoration:none;"
                                         th:href="'/contest/' + ${contestProblem.contest_id} + '/status/problem/' + ${contestProblem.num} + '/page/1'">
                                    [[#{problem.all_submit}]]</a>
                                </span>
                            </div>
                        </div>
                        <div class="" style="">
                            <table class="status rtable">
                                <tr class="header">
                                    <th  class="verdict left-item">[[#{status}]]</th>
                                    <th  class="time">[[#{timeuse}]]</th>
                                    <th  class="memory">[[#{memoryuse}]]</th>
                                    <th  class="language">[[#{language}]]</th>
                                    <th  class="date">[[#{submitdate}]]</th>
                                </tr>
                            </table>
                        </div>
                        <div id="problem-status-loader" class="problem-status-loader"><img th:src='@{/img/loader.gif}'></div>
                    </div>
                </div>
                <div id="problem-information" class="problem-information">
                    <div class="data-title">
                        <h3 th:text="${contestProblem.num}+'.'+${contestProblem.title}"></h3>
                        <span th:text="#{problem.time_limit} + ':' + ${problem.time_limit} + 'MS&nbsp;&nbsp;' + #{problem.memory_limit} + ':' + ${problem.memory_limit} + 'KB'"></span>
                        <br/>
                    </div>
                    <div class="probleminfo" style="padding:0px 12px 12px 0px;">
                        <h5 th:text="#{problem.description}">:</h5><span th:utext="${problem.description}"></span>
                        <h5 th:text="#{problem.input}">:</h5><span th:utext="${problem.input}"></span>
                        <h5 th:text="#{problem.output}">:</h5><span th:utext="${problem.output}"></span>
                        <h5 th:text="#{problem.sample_test}">:</h5>
                        <div class="sample-test">
                            <div class="input"><div class="title">[[#{problem.sample_input}]]</div>
                                <div class="sample-input"><pre th:utext="${problem.sample_input}"></pre></div>
                            </div>
                            <div class="output"><div class="title">[[#{problem.sample_output}]]</div>
                                <div class="sample-output"><pre th:utext="${problem.sample_output}"></pre></div>
                            </div>
                        </div>
                        <h5 th:text="#{problem.note}">:</h5><span th:utext="${problem.hint}"></span>
                    </div>
                </div>
            </div>
            <div id="bottom-bar-left">
                <div class="bottom_button"></div>
            </div>
        </div>
        <div id="problem-drag-bar" class="gutter gutter-horizontal"></div>
        <div id="problem-box-right">
            <div id="ide-box-nav" class="ide-second-nav">
                <div class="ide-box-nav-left">
                    <input type="hidden" id="username" name="username" th:value="${session.session_username}"/>
                    <input type="hidden" id="contestId" name="contestId" th:value="${contestProblem.contest_id}"/>
                    <input type="hidden" id="problemId" name="problemId" th:value="${contestProblem.num}">
                    <select class="lang-choice" id="select_lang" name="language" th:if="${languages==null}">
                        <option value="1" >MS C++</option>
                        <option value="2" >MS C</option>
                        <option value="3" >GNU C++</option>
                        <option value="4" >GNU C</option>
                        <option value="5" >Java</option>
                        <option value="8" >Pascal</option>
                    </select>
                    <select class="lang-choice" id="select_lang" name="language" th:if="${languages!=null}">
                        <option th:each="language,stat : ${languages}"
                            th:value="${language.id}"
                            th:text="${language.language_name}">
                    </select>
                </div>
                <div class="ide-box-nav-right">
                    <span class="ide-menu-item load-default-template" th:title="#{ide.reset_default_code_template}">
                        <img class="ide-menu-img" src="/img/default_code.png" />
                    </span>
                    <span class="ide-menu-item ide-setting " th:title="#{ide.setting}">
                        <img class="ide-menu-img" src="/img/ide_setting.png" />
                    </span>
                </div>
            </div>
            <div id="ide-box" class="ide-box">
                <div id="source" class="source-box"></div>
                <div id="test-box">
                    <div id="test-box-nav">
                        <div id="test-nav-tab-input" class="test-box-nav-tab test-box-nav-tab-cur">[[#{problem.testbox.input}]]</div>
                        <div id="test-nav-tab-output" class="test-box-nav-tab">[[#{problem.testbox.output}]]</div>
                    </div>
                    <table class="test-box-tb">
                        <tr id="test-box-tb-input" >
                            <td><textarea id="input" class="test-box-input small-scrollbar" name="input" rows="10">[[${problem.sample_input}]]</textarea></td>
                        </tr>
                        <tr id="test-box-tb-output" style="display:none">
                            <td>
                                <span id="output-status" class="test-box-output-status" th:text="#{problem.testbox.running_code}"></span><br>
                                <textarea id="output" class="test-box-output small-scrollbar" name="output" rows="10"readonly="readonly"></textarea></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="bottom-bar-right">
                <div id="consoleMenu" class="console-menu">[[#{problem.console}]]<span id="consoleCaert" class="caret-down"></span></div>
                <div class="bottom_button">
                    <input id="runsolution" class="run-solution button_submit" type="submit" th:value="#{submit.run}"/>
                    <input id="submitsolution" class="submit-solution button_submit" type="submit" th:value="#{submit.submit}"/>
                </div>
            </div>
        </div>
</div>
<script th:src="@{/js/monaco-editor/min/vs/loader.js}"></script>
<script type="text/javascript" th:inline="javascript" th:src="@{/js/submit.js}"></script>
<div th:include="ide-setting"></div>
<div th:include="status-pop"></div>
</body>
</html>
